<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>迁移图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="language,proj4,mapv" src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        //一定要去mapbox注册一个key,这个key会失效的
        mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
        var map = new mapboxgl.Map({
            container: 'map', // 绑定div
            style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
            center: [112, 38.00],
            zoom: 3
        });
        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            //经纬度坐标转web墨卡托
            const earthRad = 6378137.0;
            const x = e.lngLat.lng * Math.PI / 180 * earthRad;
            const a = e.lngLat.lat * Math.PI / 180;
            const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
            document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });
        map.addControl(new MapboxLanguage(), 'top-right');
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        var randomCount = 500;

        var node_data = {
            "0": { "x": 108.154518, "y": 36.643346 },
            "1": { "x": 121.485124, "y": 31.235317 },
        };

        var edge_data = [
            { "source": "1", "target": "0" }
        ];

        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];

        // 构造数据
        for (var i = 1; i < randomCount; i++) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            node_data[i] = {
                x: cityCenter.lng - 5 + Math.random() * 10,
                y: cityCenter.lat - 5 + Math.random() * 10,
            };
            edge_data.push(
                { "source": ~~(i * Math.random()), "target": '0' }
            );
        }

        var fbundling = mapv.utilForceEdgeBundling()
            .nodes(node_data)
            .edges(edge_data);

        var results = fbundling();

        var data = [];
        var timeData = [];

        for (var i = 0; i < results.length; i++) {
            var line = results[i];
            var coordinates = [];
            for (var j = 0; j < line.length; j++) {
                coordinates.push([line[j].x, line[j].y]);
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [line[j].x, line[j].y]
                    },
                    count: 1,
                    time: j
                });
            }

            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: transformCoords(coordinates)
                }
            });

            function transformCoords(coordinates) {
                var coords = [];
                coordinates.map(function (coordinate) {
                    coords.push(coordinate);
                });
                return coords;
            }
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            context: '2d',
            strokeStyle: 'rgba(55, 50, 250, 0.3)',
            globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(55, 50, 250, 0.5)',
            shadowBlur: 10,
            lineWidth: 1.0,
            draw: 'simple'
        };

        new mapboxgl.zondy.MapvLayer(map, dataSet, options);

        var dataSet = new mapv.DataSet(timeData);

        var options = {
            context: '2d',
            fillStyle: 'rgba(255, 250, 250, 0.9)',
            globalCompositeOperation: 'lighter',
            size: 1.5,
            animation: {
                type: 'time',
                stepsRange: {
                    start: 0,
                    end: 100
                },
                trails: 1,
                duration: 5
            },
            draw: 'simple'
        };

        new mapboxgl.zondy.MapvLayer(map, dataSet, options);
    </script>


</body>

</html>